<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<@cms_site id=siteId!'' >
		<@cms_channel id=businessId!'' >
			<meta name="keywords" content="${(site.keywords)!''},${(tag_bean.name)!''}" />
			<title>${(tag_bean.name)!''}</title>
		</@cms_channel>
		</@cms_site>
	   	<link rel="stylesheet" href="${ctx}/css/wechat/phone.css" />
	    <link rel="stylesheet" href="${ctx}/css/wechat/style.css" />
	    <link rel="stylesheet" href="${ctx}/css/wechat/swiper.3.1.7.min.css" />
	    <script type="text/javascript" src="${ctx}/js/wechat/jQuery.1.8.2.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/wechat/height.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/wechat/swiper.3.1.7.min.js" ></script>
	    <style>
	    	body{
	    		background: url(${ctx}/img/wechat/bszy_bgimg.jpg);
	    		background-size: 100% 100%;
	    		background-repeat: no-repeat;
	    		background-position: center;
	    	}
	    	.boxShadow{-moz-box-shadow:0px 0px 10px #ABABAB; -webkit-box-shadow:0px 0px 10px #ABABAB; box-shadow:0px 0px 10px #ABABAB;}
	    	
	    	.swiper-pagination,.swiper-pagination-clickable{
				bottom: 5%;left:14px;
			}
			.swiper-pagination-bullet {
				width: 40px;height: 3px;margin-left: 20px;
				display: inline-block;border-radius: 0;
				background: #e0dada;opacity: .8;
			}
			.swiper-pagination-bullet-active {opacity: 1;background: #ed425b;}.swiper-pagination{padding-right: 8px;}
			ul li div.w-28{
				word-wrap: break-word;letter-spacing: 12px;font-family: "微软雅黑";font-weight: bold;
				color: #2d465c;
			}
	    </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col12 l-ht0">
					<img src="${ctx}/img/wechat/bszy_banner.jpg" class="per100" />
				</div>
			</div>
			<div class="row">
				<div class="col12 mt32">
					<div class="swiper-container">
						<div class="swiper-wrapper">
						<@cms_content_list page=(returnDatas.page)! channelId=businessId>
						    <#if tag_list?? && (tag_list?size>0)>
						    	<#list tag_list as _dataCount>
						    		<#if (_dataCount_index%8==0) || (_dataCount_index==0)>
									    <div class="swiper-slide">
									    	<ul class="display-b pl20 pr20">
								        		<li class="ht300 per12-5 pl2 fl <#if _dataCount_index%2==0>pt74</#if>" onclick="toDetail('${(_dataCount.id)!''}');">
								        			<div class="ht224 w-28 border-radius28 border-f3f4f5">
								        				<div class="w-28 display-ib tc pl6 pt20 font14 overflow-h" style="max-height: 16.83rem;">
									        				${(_dataCount.title)!''}
									        			</div>
									        			<div class="display-ib w-28 ht20 tc l-ht20">
									        				<img src="${ctx}/img/wechat/sfbz_down.png" class="w-8 ht8 vertical-a-m" />
									        			</div>
								        			</div>
								        		</li>
								   	<#else>
								   				<li class="ht300 per12-5 pl2 fl <#if _dataCount_index%2==0>pt74</#if>" onclick="toDetail('${(_dataCount.id)!''}');">
								        			<div class="ht224 w-28 border-radius28 border-f3f4f5">
								        				<div class="w-28 display-ib tc pl6 pt20 font14 overflow-h" style="max-height: 16.83rem;">
									        				${(_dataCount.title)!''}
									        			</div>
									        			<div class="display-ib w-28 ht20 tc l-ht20">
									        				<img src="${ctx}/img/wechat/sfbz_down.png" class="w-8 ht8 vertical-a-m" />
									        			</div>
								        			</div>
								        		</li>
								        		<#if !_dataCount_has_next || ((_dataCount_index>0 && (_dataCount_index+1)%8==0))>
								        	</ul>
								        	
							        	</div>
							        			</#if>
									</#if>
								</#list>
							</#if>
						</@cms_content_list>
						</div>
					</div>
				</div>
				<!-- 如果需要对应的锚点 -->
				<div class="swiper-pagination"></div>
			</div>
			<img src="${ctx}/img/wechat/bszy_search.png" class="w-42 ht42 boxShadow radius-circle btn pos-f bottom5p right30 z-index100" />
		</div>
	</body>
	
	<script>
		/*链接跳转*/
		function toDetail(contentId){
			window.location = "${ctx}/f/mp/${siteId!''}/"+contentId;
		}
	
		var mySwiper = new Swiper ('.swiper-container', {
			pagination: '.swiper-pagination',
        	paginationClickable: true,
		    /*autoplay : 10000000,*/
		});
	</script>
	
</html>
